<template>
  <div class="gradient-background" :class="[isMobile ? 'mobile-login' : 'pc-login']">
    <div class="login-container">
      <h1 class="login-title">测试登录</h1>
      <div class="login-info">
        <div class="configuration-name">im地址：</div>
        <input class="login-input" type="text" v-model="loginData.baseURL" />
      </div>

      <div class="login-info">
        <div class="configuration-name">socket：</div>
        <input class="login-input" type="text" v-model="loginData.socketUrl" />
      </div>

      <div class="login-info">
        <div class="configuration-name">企业ID：</div>
        <input class="login-input" type="text" v-model="loginData.corpId" />
      </div>

      <div class="login-info">
        <div class="configuration-name">技能组：</div>
        <input class="login-input" type="text" v-model="loginData.workGroupName" />
      </div>

      <div class="login-info">
        <div class="configuration-name">账号：</div>
        <input class="login-input" type="text" v-model="loginData.userName" />
      </div>

      <div class="login-info">
        <div class="configuration-name" style="width: fit-content">坐席账号：</div>
        <input class="login-input" type="text" v-model="loginData.agentId" />
      </div>
      <div style="font-size: 16px">
        指定坐席视频：
        <el-switch v-model="loginData.autoVideo" :before-change="beforeChange" />
      </div>

      <div style="font-size: 16px" v-if="isMobile">
        开启vConsole：
        <el-switch v-model="loginData.showConsole" />
      </div>

      <el-button
        :loading="loading"
        type="primary"
        @click="userLogin"
        style="width: 100%; margin-top: 10px"
        >登录</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import app from '@/utils/app';
import { ref, onMounted } from 'vue';
import { globalEmitter } from '../../lib/index';
import { useRouter } from 'vue-router';

import { ElMessage } from 'element-plus';
import 'element-plus/es/components/message/style/css';

const router = useRouter();

const loading = ref(false);

const loginData = ref({
  corpId: '',
  workGroupName: '',
  userName: '',
  baseURL: '',
  socketUrl: '',
  agentId: '',
  autoVideo: false,
  showConsole: false
});

const isMobile = ref(false);
onMounted(() => {
  loginData.value.baseURL = app.api;
  loginData.value.socketUrl = app.socket;
  isMobile.value = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
  globalEmitter.on('login_success', () => {});
  globalEmitter.on('login_error', () => {
    loading.value = false;
  });
});

function userLogin() {
  loading.value = true;
  if (
    loginData.value.baseURL &&
    loginData.value.corpId &&
    loginData.value.userName &&
    loginData.value.socketUrl &&
    loginData.value.workGroupName
  ) {
    let visitor_name = loginData.value.userName;
    visitor_name = visitor_name.startsWith('visitor_') ? visitor_name : `visitor_${visitor_name}`;

    let query: any = {
      comid: loginData.value.corpId,
      username: visitor_name,
      wg: loginData.value.workGroupName
    };
    if (loginData.value.agentId) {
      query.agentName = loginData.value.agentId;
      if (loginData.value.autoVideo) {
        query.autoVideo = 1;
      }
    }
    if (isMobile.value && loginData.value.showConsole) {
      query.showConsole = 1;
    }
    router.replace({
      path: isMobile.value ? '/mobile' : '/pc',
      query
    });
    return;
  }
  loading.value = false;
}

const beforeChange = () => {
  loginData.value.autoVideo = true;
  if (loginData.value.agentId) {
    return true;
  }
  loginData.value.autoVideo = false;
  ElMessage.error('请输入指定坐席账号！');
  return false;
};
</script>

<style scoped>
.gradient-background {
  background: linear-gradient(to bottom, #c2d7ff, #ffffff);
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-container {
  padding: 24px;
  width: 360px;
  background-color: #ffffff;
  min-height: 200px;
  border-radius: 12px;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
}

.pc-login {
  justify-content: center;
}

.mobile-login {
  padding-top: 30%;
}

.login-title {
  margin-bottom: 24px;
  text-align: center;
  font-size: 18px;
  color: #333333;
  font-weight: 700;
}

.login-info {
  margin-bottom: 16px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.login-input {
  flex-grow: 1;
  height: 35px;
  font-size: 16px;
}

.configuration-name {
  width: 78px;
  flex-shrink: 0;
  font-size: 18px;
  color: var(--color-text);
}

.login-button {
  width: 100%;
  height: 35px;
  margin-top: 30px;
  background-color: #c2d7ff;
  border: 0px;
  color: #333333;
  font-size: 16px;
}
</style>
